<template>
  <div class="c-bg-sgray">
    <!-- 测评证书 -->
    <div v-show="type==0">
      <div class="c-bg-white c-flex-row c-aligni-center c-ph24 c-pv12 c-bgTittle">
        <div class="iconfont c-fs22 c-fc-sorange c-mr8">&#xe64e;</div>
        <div class="c-fs22 c-fc-sorange">2023年9月14日前获得的测评类证书在此查看</div>
      </div>
      <div class="c-flex-row c-justify-sb c-flexw-wrap c-ph24 c-pb24">
        <div @click="enlarge(item)" class="c-ww282 c-ph12 c-pv12 c-mt24 c-br16 c-bg-white" v-for="(item,index) in cercertificateList" :key="index">
          <img :src="$addXossFilter(item.honorImg)" alt="" />
          <div class="c-fs24 c-fc-xblack c-textAlign-c c-mb10 c-text-ellipsis2 c-hh28 c-mt12" v-if="item.honorName">{{item.honorName}}</div>
          <div class="c-fs18 c-fc-sgray c-textAlign-c c-mt12">{{item.createdAt}}</div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无证书"></loading-status-tem>
      <cj-popup v-model="showCer" round class="c-ww570">
        <img id="spreadCerImg" src="" alt="">
      </cj-popup>
    </div>

  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 0;
let LIMIT = 10;
export default {
  name: "List",
  components: {
    loadingStatusTem,
  },
  props: [],
  beforeRouteEnter(to, from, next) {
    // 不！能！获取组件实例 `this`
    if (from.path.includes('/homePage/clockIn/myCertificate')) {
      next(vm => {
        vm.$store.commit('updateLoadingStatus', {
          isLoading: false
        });
        // 加上判断，否则返回分页会有问题
        if (vm.total * 1 == vm.to * 1) {
          vm.dataStatus = vm.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          vm.dataStatus = 'HAS_MORE_DATA';
        }
        if (vm.achievementList.length == 0) {
          vm.initData();
        }
      });
    } else {
      next(vm => {
        vm.initData();
      });
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      dataStatus: 'HAS_MORE_DATA',
      achievementList: [],
      cercertificateList: [],
      type: 0,
      showCer: false,
      total: 0,
      to: 0,
      tabList: [
        {
          title: '测评证书',
          index: 0,
        }
        // , {
        //   title: '打卡证书',
        //   index: -1,
        // }, {
        //   title: '训练营证书',
        //   index: 1
        // }
      ]
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    // changeType(type) {
    //   if (type == this.type) {
    //     return;
    //   }
    //   this.type = type;
    //   pageIndex = 1;
    //   this.achievementList = [];
    //   this.cercertificateList = [];
    //   this.campList = [];
    //   if (type == 0) {
    //     this.getCercertificateList();
    //   } else if (type == -1) {
    //     this.getAchievementList();
    //   } else if (type == 1) {
    //     this.getCampList();
    //   }
    // },
    //进入课程详情
    clickGoClockInDetail(signColId) {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/clockInDetail",
        query: {
          clockInId: signColId
        }
      });
    },
    clickGoCampDetail(campId) {
      this.$routerGo(this, "push", {
        path: `/homePage/camp/campDetail?campId=${campId}&ckFrom=${global.ckFrom.camp}`
      });
    },

    //进入打卡证书
    clickGoCert(signColId) {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/myCertificate",
        query: {
          clockInId: signColId
        }
      });
    },

    //获取我的作业列表
    getAchievementList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';

      utilJs.getMethod(
        global.apiurl + "signCard/achievement?page=" + pageIndex + '&limit=' + LIMIT,
        res => {
          if (pageIndex == 1) {
            this.achievementList = res.data;
          } else {
            this.achievementList = [...this.achievementList, ...res.data];
          }
          this.total = res.total
          this.to = res.to
          if (res.total * 1 == res.to * 1) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    // 测评证书
    getCercertificateList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        global.apiurl + "exam/myHonors?page=" + pageIndex,
        res => {
          if (pageIndex == 1) {
            this.cercertificateList = res.data;
          } else {
            this.cercertificateList = [...this.cercertificateList, ...res.data];
          }
          this.total = res.total
          this.to = res.to
          if (res.total * 1 == res.to * 1) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    // 训练营证书
    getCampList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        global.apiurl + "k12/trainings/achievements?page=" + pageIndex,
        res => {
          if (pageIndex == 1) {
            this.campList = res.data;
          } else {
            this.campList = [...this.campList, ...res.data];
          }
          this.total = res.total
          this.to = res.to
          if (res.total * 1 == res.to * 1) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    enlarge(item) {
      let ig = document.getElementById("spreadCerImg");
      ig.setAttribute("src", item.honorImg);
      this.showCer = true;
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的成就", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的成就", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        // if (this.dataStatus == 'HAS_MORE_DATA' && this.achievementList.length > 0 && this.type == -1) {
        //   this.getAchievementList();
        // } else
        if (this.dataStatus == 'HAS_MORE_DATA' && this.cercertificateList.length > 0 && this.type == 0) {
          this.getCercertificateList();
        } else if (this.dataStatus == 'HAS_MORE_DATA' && this.campList.length > 0 && this.type == 1) {
          this.getCampList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.achievementList = [];
      this.cercertificateList = [];
      this.campList = []
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      // this.tabList = [];
      // if (this.companyAuth.enableExamModule == 1) {
      //   let ts = {
      //     title: '测评证书',
      //     index: 0,
      //   };
      //   this.tabList.push(ts);
      // }
      // if (this.companyAuth.enableSignCardModule == 1) {
      //   let ts = {
      //     title: '打卡证书',
      //     index: -1,
      //   };
      //   this.tabList.push(ts);
      // }
      // if (this.companyAuth.enableTrainingModule == 1) {
      //   let ts = {
      //     title: '训练营证书',
      //     index: 1
      //   };
      //   this.tabList.push(ts);
      // }
      this.getCercertificateList();
      // switch (this.type) {
      //   case -1:
      //     this.getAchievementList();
      //     return;
      //   case 0:
      //     this.getCercertificateList();
      //     return;
      //   case 1:
      //     this.getCampList();
      // }
    }
  },
  activated() {
    setDocumentTitle("我的成就");// eslint-disable-line
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-orange-linear-gradient {
  background: linear-gradient(#ff8920, #ffc26b); /* 标准的语法 */
  box-shadow: 0px 2px 8px 0px rgba(255, 141, 37, 0.5);
  border-radius: 50%;
}
.c-bgTittle {
  background:#FFF1E5;
}
</style>
